<template>
  <div class="app-container" style="height: 1060px;">
    <div style="display: flex;flex-direction: row;width: 1150px;">
      <!-- 区域一 -->
      <div style="width: 220px;height: 1000px;display: flex;flex-direction: row;flex-wrap: wrap;align-content: flex-start;padding-bottom: 500px;overflow-y: auto;background-color: #fff;margin-right: 10px;margin-left: 10px;">
        <!-- <div v-for="(item, index) in componentList" :key="index" @click="createNode(item)"
          style="width: 120px;height: 80px;margin-bottom: 20px;background-color: #eee;margin-right: 20px;color: #333;display: flex;flex-direction: row;align-items: center;justify-content: center;">
            <div style="background-color: #fff;display: flex;flex-direction: column;align-items: center;justify-content: center;width: 100px;height: 60px;">
              <div style="font-size: 17px;font-weight: bold;">{{item.title}}</div>
            </div>
        </div> -->
        <div v-for="(item, index) in componentList" :key="index" @click="createNode(item)"
        style="width: 100px;height: 40px;line-height: 40px;text-align: center;border: 1px solid #eee;margin-right: 10px;margin-bottom: 10px;font-size: 14px;font-weight: bold;">
          {{item.title}}
        </div>
      </div>
      <!-- 区域二 -->
      <div style="width: 391px; flex-shrink: 0;border: 8px solid #333;border-radius: 10px;background-color: #f8f8f8;min-height: 700px;position: relative;">
        <!-- <div style='width: 100%;height: 44px;background-color: #666;color: #fff;text-align: center;line-height: 44px;position: absolute;top: 0;left: 0;'>{{pageConfig.title}}</div> -->
        <div style="height: 1000px;overflow-y: auto;">
          <div v-for="(node, index) in nodeList" :key="index">
            <placeCenter ref="placeCenter" :flag="1" :node="node" :itemDetail="itemDetail" :index="index" :currentTarget="currentTarget" @selectComponent="selectComponent" @removeComponent='removeComponent'></placeCenter>
          </div>
        </div>
      </div>
      <!-- 区域三 -->
      <div style="width: 500px;height: 1000px;margin-left: 10px;padding: 10px;padding-bottom: 1000px;flex-shrink: 0;overflow-y: auto;background-color: #fff;">
        <div style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
          <div style="margin-left: 10px;font-size: 22px;font-weight: bold;">{{nodeList[currentTarget] ? nodeList[currentTarget].componentModel.title:''}}</div>
          <div style="display: flex;flex-direction: row;justify-content: flex-end;">
            <el-button class="handleTap" @click="back">返回</el-button>
            <el-button type="primary" class="handleTap" @click="saveConfig">保存配置</el-button>
          </div>
        </div>
        <placeRight ref="placeRight" :name="nodeList[currentTarget]? nodeList[currentTarget].componentModel.name : ''" :nodeModel='nodeList[currentTarget]' style="margin-top: 20px;" @refreshData='getNodeList'></placeRight>
      </div>
    </div>
  </div>
</template>

<script>
import {
  findItemListRemoveActivity, getItemInfo
} from '@/api/merchant/item.js'
import {
  getComponentList, getNodeListByPage, saveNodeConfig
} from '@/api/interface/page.js'
import placeCenter from './placeCenter'
import placeRight from './placeRight'
import { Loading } from 'element-ui'
import {createNodes} from './data/createNodes.js'
import {tools} from '@/utils/tools.js'

export default {
  components: {
    placeCenter,
    placeRight,
  },
  data() {
    return {
      page: 1,
      size: 10,
      totalSize: 0,
      pageConfig: '',
      loading: false,
      fullscreenLoading: null,
      searchParams: {},
      componentList: [],
      nodeList: [],
      nodeList_org: [],
      currentTarget: -1,
      currentNode: {componentModel:{}},
      lastNode: {},
      defaultItem: 856,
      itemDetail: {}
    }
  },
  created(){
    this.pageConfig = JSON.parse(decodeURIComponent(this.$route.query.data))
    this.getComponentList()
    this.getNodeList()
  },
  methods:{
    back(){
      this.$router.push({ name: this.$route.query.currentRouteName, query: {currentSearchParams: this.$route.query.currentSearchParams} })
    },
    // 新增节点
    createNode(e){
      var node = createNodes(e)
      node.pageConfig = this.pageConfig.id
      this.nodeList.splice(this.currentTarget+1, 0, node)
      this.currentTarget = this.currentTarget+1
      this.$forceUpdate()
    },
    selectComponent(e){
      this.currentTarget = e
      this.currentNode = this.nodeList[e]
    },
    removeComponent(e){
      this.nodeList.splice(e, 1)
      // 当删除最后一个节点的时候，点击上一个组件
      if(this.nodeList.length==e && this.nodeList.length>0){
        this.$refs.placeCenter[0].clickComponent(e-1)
      }
    },
    saveConfig(){
      console.log('保存配置', this.nodeList, this.$refs.placeRight.nodeModel)
      this.fullscreenLoading = Loading.service({ fullscreen: true, text: '页面配置保存中，请稍后！'});
      this.nodeList.map(item=>{
        item.config = JSON.stringify(item.configDict)
      })
      saveNodeConfig({nodeList: this.nodeList, pageConfig: this.pageConfig.id}).then(res => {
        if(res.data.code == 10000){
          this.fullscreenLoading.close()
          this.$message({message: '保存成功', type: 'success'})
          // this.getNodeList()
          this.$router.push({ name: this.$route.query.currentRouteName, query: {currentSearchParams: this.$route.query.currentSearchParams} })

        }
      })
    },
    getComponentList() {
      getComponentList().then(res => {
        if(res.data.code == 10000){
          this.totalSize = res.data.data.total_count
          this.componentList = res.data.data.list
        }
      });
    },
    getNodeList(){
      getNodeListByPage({pageConfig: this.pageConfig.id}).then(res => {
        if(res.data.code == 10000){
          this.nodeList = res.data.data
        }
      })
    },
    // 查询商品列表
    findItemListRemoveActivity(node, filterModel) {
      var searchParams = {}
      searchParams.page = 1
      searchParams.size = 6
      searchParams = Object.assign(filterModel, searchParams)
      findItemListRemoveActivity(searchParams).then(res => {
        if(res.data.code == 10000){
          node.itemList = res.data.data.list
          this.$forceUpdate()
        }
      });
    },
    getItemInfo(){
      getItemInfo({itemId: this.defaultItem}).then(res=>{
        if(res.data.code==10000){
          this.itemDetail = res.data.data
          this.$forceUpdate()
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>

</style>
